﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/SystemAdmin/Master.Master" CodeBehind="ControlCustomer.aspx.cs" Inherits="OnlineBusinesses.Areas.SystemAdmin.ControlCustomer" %>
<asp:Content ContentPlaceHolderID="ContentSystemAdmin" runat="server" ID="ContentAdmin">
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;">
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var danhsach =
                [
                    "Lệnh Hồ Xung", "Nhậm Doanh Doanh","Trương Vô Kỵ"
                ];
                var startday =
                [
                    "10/05/2012", "11/07/2013", "10/06/2012", "12/03/2012"
                ];
                var dichvus =
                [
                    "Gói dùng thử", "Gói Khởi nghiệp", "Gói chuyên nghiệp"
                ];
                var hoatdongs =
                [
                    "<span class='fa fa-circle' style='color:#0d0;'></span>", "<span class='fa fa-circle' style='color:#d00;'></span>", "<span class='fa fa-circle' style='color:#dd0;'></span>"
                ];
                var endday =
                [
                    "10/05/2015", "11/07/2015", "10/06/2015", "12/03/2015"
                ];
                var days =
                [
                    "5","10","15","20"
                ];
                var tinhtrang =
                [
                    "<span class='fa fa-lock'></span>",
                    "<span class='fa fa-unlock'></span>"
                ];
                for (var i = 0; i < 200; i++) {
                    var row = {};
                    row["firstname"] = danhsach[Math.floor(Math.random() * danhsach.length)];
                    row["lastname"] = startday[Math.floor(Math.random() * startday.length)];
                    row["productname"] = endday[Math.floor(Math.random() * endday.length)];
                    row["dichvu"] = dichvus[Math.floor(Math.random() * dichvus.length)];
                    row["hoatdong"] = hoatdongs[Math.floor(Math.random() * hoatdongs.length)];
                    row["priceValue"] = tinhtrang[Math.floor(Math.random() * tinhtrang.length)];
                    row["day"] = days[Math.floor(Math.random() * days.length)];
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'day', type: 'string' },
                        { name: 'dichvu', type: 'string' },
                        { name: 'hoatdong', type: 'string' },
                        { name: 'priceValue', type: 'string' }
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#jqxgrid").jqxGrid(
                {
                    width: $("#jqxgrid").width(),
                    source: dataAdapter,
                    selectionmode: 'multiplecellsadvanced',
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    selectionmode: 'multiplecellsadvanced',

                    columnsresize: true,
                    columns: [
                      { text: 'Tên khách hàng', dataField: 'firstname' },
                      { text: 'Dịch vụ', dataField: 'dichvu' },
                      { text: 'Trạng thái', dataField: 'hoatdong', width: 80, cellsalign: 'center', align: 'center' },
                      { text: 'Ngày còn', dataField: 'day', width: 100, cellsalign: 'center', align: 'center' },
                      { text: 'Ngày tham gia', dataField: 'lastname',width:120 },
                      { text: 'Ngày hết hạn', editable: false, dataField: 'productname', width: 120 },
                      { text: 'Tình trạng', dataField: 'priceValue', width: 100, cellsalign: 'right', cellsalign: 'center', align: 'center' },
                      {
                          text: 'Chi tiết', width: 120, cellsalign: 'center', cellsrenderer: function () {
                              return "<a href='CustormerDetails.aspx?uid=" + 1 + "' style='color:#333;text-decoration:none;margin-left:40%;' >Xem</a>";
                          }
                      }
                    ]
                });
            });
        </script>
        <h3 style="font-weight:bold;">Khách hàng
            <button type="button" class="btn btn-default pull-right hidden-xs hidden-sm" style="margin-right:20px;border-radius:0px;border:1px solid #ddd;padding-top:10px;" value="Back" onclick="history.go(-1);">
                <span class="fa fa-mail-reply" style="font-size:20px;"></span>
            </button>
        </h3>
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;">
            <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12">
                <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12" style="padding:2px;line-height:34px;">Tìm kiếm khách</div>
                <div class="col-md-8 col-xs-12 col-lg-8 col-sm-12" style="padding:2px;"><input class="input_add" placeholder="Theo tên.." /></div>
            </div>
            <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12">
                <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12" style="padding:2px;line-height:34px;">Trạng thái</div>
                <div class="col-md-8 col-xs-12 col-lg-8 col-sm-12" style="padding:2px;">
                    <select class="input_add">
                        <option selected>Tất cả</option>
                        <option>Đang sử dụng</option>
                        <option>Gần hết hạn</option>
                        <option>Đã hết hạn</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12">
                <div class="col-md-4 col-xs-12 col-lg-4 col-sm-12" style="padding:0px;line-height:34px;">Tình trạng</div>
                <div class="col-md-8 col-xs-12 col-lg-8 col-sm-12" style="padding:0px;">
                    <select class="input_add">
                        <option selected>Tất cả</option>
                        <option>Khóa</option>
                        <option>Mở khóa</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-xs-12 col-lg-2 col-sm-12" style="text-align:right;">
                <div class="col-xs-12 visible-xs" style="height:10px;"></div>
                <span class="btn btn-default" style="width:100%;border-radius:0px;background:#00d;color:#fff;font-weight:bold;">Tìm kiếm</span>
            </div>
        </div>
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;margin:10px 0px;height:1px;background:#ddd;"></div>
        <div id='jqxWidget' class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;">
            <div id="jqxgrid"></div>
        </div>
    </div>
</asp:Content>